<ng-form name="form">
  <h3>
    {{type | computeResourceLabel : true}}
    <small ng-if="limits.min && limits.max">
      {{limits.min | usageWithUnits : type}} min to {{limits.max | usageWithUnits : type}} max
    </small>
    <small ng-if="limits.min && !limits.max">
      Min: {{limits.min | usageWithUnits : type}}
    </small>
    <small ng-if="limits.max && !limits.min">
      Max: {{limits.max | usageWithUnits : type}}
    </small>
  </h3>
  <!-- Don't show the request fields if request is calculated from limit. -->
  <compute-resource
      ng-model="resources.requests[type]"
      type="{{type}}"
      label="Request"
      description="The amount of {{type | computeResourceLabel}} the container requests."
      default-value="limits.defaultRequest"
      limit-range-min="limits.min"
      limit-range-max="limits.max"
      max-limit-request-ratio="limits.maxLimitRequestRatio"
      ng-if="!requestCalculated">
  </compute-resource>
  <!-- Don't validate limit against request if request is calculated from the limit.
       (Pass undefined to the compute-resource directive for request in that case.) -->
  <compute-resource
      ng-model="resources.limits[type]"
      type="{{type}}"
      label="{{requestCalculated ? undefined : 'Limit'}}"
      description="The amount of {{type | computeResourceLabel : true}} the container is limited to use."
      default-value="limits.defaultLimit"
      limit-range-min="limits.min"
      limit-range-max="limits.max"
      request="requestCalculated ? undefined : resources.requests[type] || limits.defaultRequest"
      max-limit-request-ratio="limits.maxLimitRequestRatio"
      ng-if="!hideLimit">
  </compute-resource>
</ng-form>
